<template>
  <div>
    <AppHeader class="header">
      <template #left>
        <div 
          class="left"
          @click="drawer = true"
        >
          <i class="el-icon-menu" />
        </div>

        <el-breadcrumb 
          separator-class="el-icon-arrow-right" 
          class="breadcrumb"
        >
          <el-breadcrumb-item 
            :to="{ path: '/main' }"
          >
            我的课堂
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            用户设置
          </el-breadcrumb-item>
        </el-breadcrumb>

        <el-drawer 
          v-model="drawer" 
          direction="ltr" 
          size="240px"
        >
          <template #title>
            <div class="drawer-logo">
              <img 
                src="https://www.ketangpai.com/images/common/logo_blue.png" 
                alt="logo" 
                height="24"
              >
            </div>
          </template>
          <el-menu class="menu">
            <el-menu-item 
              v-for="(item, index) in menus" 
              :key="index"
              class="menu-item"
              @click="toNav(item.route)"
            >
              <span>{{ item.name }}</span>
            </el-menu-item>
          </el-menu>
        </el-drawer>
      </template>

      <template #right>
        <RightHeader 
          class="right-header" 
        />
      </template>
    </AppHeader>

    <div class="view-user-setting">
      <div class="head-box">
        <div class="avatar-box">
          <el-avatar 
            class="img" 
            :src="circleUrl" 
          />
        </div>
        <div class="user-info">
          <h6 class="name">
            {{ user.name }}
          </h6>
          <div>
            <el-button 
              type="text" 
              class="vip"
            >
              开通课堂派VIP
            </el-button>
          </div>
        </div>
      </div>

      <div class="tabs-box">
        <el-tabs 
          v-model="activeName" 
          class="full-width"
        >
          <el-tab-pane 
            label="账户信息" 
            name="first"
          >
            <div class="tabs-account">
              <!-- 账号设置部分 -->
              <div class="section">
                <h3>
                  <span>账号设置</span>
                </h3>
                <ul class="form-card">
                  <!-- 账号信息 -->
                  <li class="list">
                    <label class="label-title">账号</label>
                    <p class="info-txt">
                      <span class="info">
                        <i 
                          v-if="user.account === undefined" 
                          class="el-icon-warning font-color--warning"
                        />
                        {{ user.account }}
                      </span>
                    </p>
                  </li>

                  <!-- 角色设置 -->
                  <li class="list">
                    <label class="label-title">所属角色</label>
                    <p 
                      v-if="!changeTypeVisible" 
                      class="info-txt flex"
                    >
                      <span class="info">
                        <i 
                          v-if="user.type === undefined" 
                          class="el-icon-warning font-color--warning"
                        />
                        {{ user.type === 1 ? '学生' : '老师' }}
                      </span>
                      <span 
                        class="but-box" 
                        @click="changeTypeVisible = true"
                      >
                        去设置
                      </span>
                    </p>
                    <p 
                      v-else 
                      class="info-txt flex"
                    >
                      <span>
                        <el-radio 
                          v-model="userInfo.type" 
                          :label="2"
                        >
                          老师
                        </el-radio>
                        <el-radio 
                          v-model="userInfo.type" 
                          :label="1"
                        >
                          学生
                        </el-radio>
                      </span>
                      <span>
                        <el-button 
                          size="mini" 
                          @click="cancelChangeType"
                        >
                          取消
                        </el-button>
                        <el-button 
                          size="mini" 
                          type="primary" 
                          @click="submitChangeType"
                        >
                          确定
                        </el-button>
                      </span>
                    </p>
                  </li>

                  <!-- 手机号设置 -->
                  <li class="list">
                    <label class="label-title">手机号</label>
                    <p class="info-txt flex">
                      <span class="info auto-margin">
                        <i 
                          v-if="user.phone === undefined" 
                          class="el-icon-warning font-color--warning"
                        />
                        {{ user.phone }}
                      </span>
                      <template v-if="user.phone !== undefined">
                        <span 
                          class="but-box" 
                          @click="openEditPhone"
                        >
                          更换手机号
                        </span>
                        <span class="divider">|</span>
                        <span 
                          class="but-box" 
                          @click="deletePhone"
                        >
                          解绑
                        </span>
                      </template>
                      <span 
                        v-else 
                        class="but-box" 
                        @click="openEditPhone"
                      >
                        绑定手机
                      </span>
                    </p>
                  </li>

                  <!-- 密码设置 -->
                  <li class="list">
                    <label class="label-title">密码</label>
                    <p class="info-txt flex">
                      <span class="info">
                        <i 
                          v-if="user.password === undefined" 
                          class="el-icon-warning font-color--warning"
                        />
                        ******
                      </span>
                      <span 
                        class="but-box" 
                        @click="editPasswordVisible = true"
                      >
                        修改密码
                      </span>
                    </p>
                  </li>
                </ul>
              </div>

              <!-- 基础信息部分 -->
              <div class="section">
                <h3 class="flex">
                  <span>基础信息</span>
                  <template v-if="!editBaseInfoVisible">
                    <span 
                      class="but-box" 
                      @click="editBaseInfoVisible = true"
                    >
                      编辑
                    </span>
                  </template>
                  <template v-else>
                    <span>
                      <el-button 
                        size="mini" 
                        @click="cancelEditBaseInfo"
                      >
                        取消
                      </el-button>
                      <el-button 
                        size="mini" 
                        type="primary" 
                        @click="submitEditBaseInfo"
                      >
                        保存
                      </el-button>
                    </span>
                  </template>
                </h3>

                <ul class="form-card">
                  <!-- 姓名 -->
                  <li class="list">
                    <label class="label-title">姓名</label>
                    <template v-if="!editBaseInfoVisible">
                      <p class="info-txt">
                        <span class="info">
                          <i 
                            v-if="user.name === undefined" 
                            class="el-icon-warning font-color--warning"
                          />
                          {{ user.name }}
                        </span>
                      </p>
                    </template>
                    <p 
                      v-else 
                      class="input-p"
                    >
                      <el-input 
                        v-model="userInfo.name"
                        placeholder="请输入内容"
                        maxlength="8"
                        show-word-limit
                      />
                    </p>
                  </li>

                  <!-- 学号/工号 -->
                  <li class="list">
                    <label class="label-title">
                      {{ user.type === 2 ? '工号' : '学号' }}
                    </label>
                    <template v-if="!editBaseInfoVisible">
                      <p class="info-txt">
                        <span class="info">
                          <i 
                            v-if="user.no === undefined" 
                            class="el-icon-warning font-color--warning"
                          />
                          {{ user.no === undefined ? '未完善' : user.no }}
                        </span>
                      </p>
                    </template>
                    <p 
                      v-else 
                      class="input-p"
                    >
                      <el-input 
                        v-model="userInfo.no"
                        placeholder="请输入内容"
                        maxlength="20"
                        show-word-limit
                      />
                    </p>
                  </li>

                  <!-- 学校信息 -->
                  <li class="list">
                    <label class="label-title">学校</label>
                    <template v-if="!editBaseInfoVisible">
                      <p class="info-txt">
                        <span class="info">
                          <i 
                            v-if="user.school === undefined" 
                            class="el-icon-warning font-color--warning"
                          />
                          {{ user.school }}
                        </span>
                      </p>
                    </template>
                    <p 
                      v-else 
                      class="input-p"
                    >
                      <el-input 
                        v-model="userInfo.school"
                        placeholder="请输入内容"
                      />
                    </p>
                  </li>

                  <!-- 院系信息 -->
                  <li class="list">
                    <label class="label-title">院系</label>
                    <template v-if="!editBaseInfoVisible">
                      <p class="info-txt">
                        <span class="info">
                          <i 
                            v-if="user.academy === undefined" 
                            class="el-icon-warning font-color--warning"
                          />
                          {{ user.academy === undefined ? '未完善' : user.academy }}
                        </span>
                      </p>
                    </template>
                    <p 
                      v-else 
                      class="input-p"
                    >
                      <el-input 
                        v-model="userInfo.academy"
                        placeholder="请输入内容"
                      />
                    </p>
                  </li>

                  <!-- 专业信息 -->
                  <li class="list">
                    <label class="label-title">专业</label>
                    <template v-if="!editBaseInfoVisible">
                      <p class="info-txt">
                        <span class="info">
                          <i 
                            v-if="user.major === undefined" 
                            class="el-icon-warning font-color--warning"
                          />
                          {{ user.major === undefined ? '未完善' : user.major }}
                        </span>
                      </p>
                    </template>
                    <p 
                      v-else 
                      class="input-p"
                    >
                      <el-input 
                        v-model="userInfo.major"
                        placeholder="请输入内容"
                      />
                    </p>
                  </li>

                  <!-- 学生特有信息 -->
                  <template v-if="user.type === 1">
                    <!-- 班级信息 -->
                    <li class="list">
                      <label class="label-title">班级</label>
                      <template v-if="!editBaseInfoVisible">
                        <p class="info-txt">
                          <span class="info">
                            <i 
                              v-if="user.clazz === undefined" 
                              class="el-icon-warning font-color--warning"
                            />
                            {{ user.clazz === undefined ? '未完善' : user.clazz }}
                          </span>
                        </p>
                      </template>
                      <p 
                        v-else 
                        class="input-p"
                      >
                        <el-input 
                          v-model="userInfo.clazz"
                          placeholder="请输入内容"
                        />
                      </p>
                    </li>

                    <!-- 年级信息 -->
                    <li class="list">
                      <label class="label-title">年级</label>
                      <template v-if="!editBaseInfoVisible">
                        <p class="info-txt">
                          <span class="info">
                            <i 
                              v-if="user.grade === undefined" 
                              class="el-icon-warning font-color--warning"
                            />
                            {{ user.grade === undefined ? '未完善' : user.grade }}
                          </span>
                        </p>
                      </template>
                      <p 
                        v-else 
                        class="input-p"
                      >
                        <el-select 
                          v-model="userInfo.grade"
                          placeholder="请选择"
                          class="grade-select"
                        >
                          <el-option 
                            v-for="i in 6"
                            :key="i"
                            :value="`${i}年级`"
                            :label="`${i}年级`"
                          />
                        </el-select>
                      </p>
                    </li>
                  </template>

                  <!-- 教师特有信息 -->
                  <li 
                    v-if="user.type === 2" 
                    class="list"
                  >
                    <label class="label-title">所授课程</label>
                    <template v-if="!editBaseInfoVisible">
                      <p class="info-txt">
                        <span class="info">
                          <i 
                            v-if="user.course === undefined" 
                            class="el-icon-warning font-color--warning"
                          />
                          {{ user.course === undefined ? '未完善' : user.course }}
                        </span>
                      </p>
                    </template>
                    <p 
                      v-else 
                      class="input-p"
                    >
                      <el-input 
                        v-model="userInfo.course"
                        placeholder="请输入内容"
                      />
                    </p>
                  </li>
                </ul>
              </div>

              <!-- 第三方账号绑定 -->
              <div class="section">
                <h3 class="flex">
                  <span>第三方账号绑定</span>
                </h3>
                <ul class="form-card">
                  <!-- 邮箱绑定 -->
                  <li class="list">
                    <label class="label-title">邮箱绑定</label>
                    <p class="info-txt flex">
                      <span class="info">
                        <i 
                          v-if="user.email === undefined" 
                          class="el-icon-warning font-color--warning"
                        />
                        {{ user.email === undefined ? '未完善' : user.email }}
                      </span>
                      <template v-if="user.email === undefined">
                        <span 
                          class="but-box" 
                          @click="openEditEmail"
                        >
                          立即绑定
                        </span>
                      </template>
                      <template v-else>
                        <span 
                          class="but-box" 
                          @click="deleteEmail"
                        >
                          解绑
                        </span>
                      </template>
                    </p>
                  </li>

                  <!-- 微信绑定 -->
                  <li class="list">
                    <label class="label-title">微信绑定</label>
                    <p class="info-txt flex">
                      <span class="info">
                        <i 
                          v-if="user.wechat === undefined" 
                          class="el-icon-warning font-color--warning"
                        />
                        {{ user.wechat === undefined ? '未完善' : user.wechat }}
                      </span>
                      <template v-if="user.wechat === undefined">
                        <span 
                          class="but-box" 
                          @click="openEditWechat"
                        >
                          立即绑定
                        </span>
                      </template>
                      <template v-else>
                        <span 
                          class="but-box" 
                          @click="deleteWechat"
                        >
                          解绑
                        </span>
                      </template>
                    </p>
                  </li>
                </ul>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane 
            label="通知设置" 
            name="second"
          >
            通知设置
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 修改密码对话框 -->
    <el-dialog
      v-model="editPasswordVisible"
      title="修改密码"
      center
      width="604px"
    >
      <el-form
        ref="passwordFormRef"
        :model="passwordForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item 
          label="新密码" 
          prop="password"
        >
          <el-input
            v-model="passwordForm.password"
            type="password"
            placeholder="请输入新密码"
            show-password
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item 
          label="确认新密码" 
          prop="passAgain"
        >
          <el-input
            v-model="passwordForm.passAgain"
            type="password"
            placeholder="请确认新密码"
            show-password
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button 
            @click="resetEditPassForm"
          >
            取 消
          </el-button>
          <el-button 
            type="primary" 
            @click="submitEditPass"
          >
            确 认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import AppHeader from "@/components/header/AppHeader.vue";
import circleUrl from "../../assets/homePage/成绩管理.png";
import RightHeader from "../../components/header/RightHeader.vue";
import { deleteEmptyOption } from "@/tools/deleteEmptyOption.js";
import { Encrypt } from "@/tools/decrypt.js";
import { Message } from "element-ui";
import { mapState } from "vuex";

export default {
    name: "UserSetting",

    components: {
        AppHeader,
        RightHeader
    },

    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.passwordForm.passAgain !== '') {
                    this.$refs.passwordFormRef.validateField('passAgain');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.passwordForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            circleUrl: circleUrl,
            drawer: false,
            menus: [
                {
                    name: '我的课堂',
                    route: '/main'
                },
                {
                    name: '备课区',
                    route: '/lessonPreparationArea'
                },
                {
                    name: '虚拟教研室',
                    route: '/teachingResseach'
                }
            ],
            activeName: 'first',
            userInfo: {},
            passwordForm: {
                password: null,
                passAgain: null
            },
            editBaseInfoVisible: false,
            changeTypeVisible: false,
            changePhoneVisible: false,
            editPasswordVisible: false,
            rules: {
                password: [
                    { validator: validatePass, required: true, trigger: 'blur' }
                ],
                passAgain: [
                    { validator: validatePass2, required: true, trigger: 'change' }
                ],
            },
        }
    },

    computed: {
        ...mapState({ user: state => state.user.user.user }),
    },

    created() {
        this.initBaseInfo();
    },

    methods: {
        // 初始化基础信息
        initBaseInfo() {
            this.userInfo = { ...this.user };
            this.userInfo = deleteEmptyOption(this.userInfo);
        },
        // 页面跳转
        toNav(nav) {
            this.$router.push(nav);
        },
        // 用户信息修改确认
        submitEditUserInfo() {
            this.$http.post("/user/update", this.userInfo).then(res => {
                if (res) {
                    this.$store.dispatch('saveUserInfo', { user: this.userInfo });
                }
            })
        },
        // 取消修改基础信息
        cancelEditBaseInfo() {
            this.initBaseInfo();
            this.editBaseInfoVisible = false;
        },
        // 基础信息修改确认
        submitEditBaseInfo() {
            if (this.userInfo.no === '') {
                let type;
                if (this.user.type === 1) type = '学号';
                else type = '工号';
                Message.error(type + '不允许为空');
            } else if (this.userInfo.name === '') {
                Message.error('姓名不允许为空');
            } else if (this.userInfo.school === '') {
                Message.error('学校不允许为空');
            }
            else {
                this.submitEditUserInfo();
            }
            this.editBaseInfoVisible = false;
        },
        // 取消修改身份类型
        cancelChangeType() {
            this.userInfo.type = this.user.type;
            this.changeTypeVisible = false;
        },
        // 身份类型修改确认
        submitChangeType() {
            this.submitEditUserInfo();
            this.changeTypeVisible = false;
        },
        // 手机号修改
        openEditPhone() {
            this.$prompt('', '修改手机号', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then((value) => {
                this.userInfo.phone = value.value;
                this.submitEditUserInfo();
            }).catch(() => {
            });
        },
        // 解绑手机号
        deletePhone() {
            this.$confirm('', '您确定要解绑吗?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                this.userInfo.phone = '';
                this.submitEditUserInfo();
                Message.success("解绑成功");
            }).catch(() => {
            });
        },
        // 邮箱修改
        openEditEmail() {
            this.$prompt('', '绑定邮箱', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then((value) => {
                this.userInfo.email = value.value;
                this.submitEditUserInfo();
            }).catch(() => {
            });
        },
        // 解绑邮箱
        deleteEmail() {
            this.$confirm('', '您确定要解绑吗?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                this.userInfo.email = '';
                this.submitEditUserInfo();
                Message.success("解绑成功");
            }).catch(() => {
            });
        },
        // 微信修改
        openEditWechat() {
            this.$prompt('', '绑定微信', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then((value) => {
                this.userInfo.wechat = value.value;
                this.submitEditUserInfo();
            }).catch(() => {
            });
        },
        // 解绑微信
        deleteWechat() {
            this.$confirm('', '您确定要解绑吗?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                this.userInfo.wechat = '';
                this.submitEditUserInfo();
                Message.success("解绑成功");
            }).catch(() => {
            });
        },
        // 密码修改确认
        submitEditPass() {
            this.$refs.passwordFormRef.validate(async valid => {
                if (!valid) return;
                if (valid) {
                    this.userInfo.password = Encrypt(this.passwordForm.password);
                    this.$http.post("/user/update", this.userInfo).then(res => {
                        if (res) {
                            this.editPasswordVisible = false;
                            this.resetEditPassForm();
                            this.$message.success("请重新登录。");
                            // 此处处理状态，将用户登出
                            this.$router.push('/');
                            this.$store.dispatch('logout');
                        }
                    })
                }
            })
        },
        // 取消修改密码
        resetEditPassForm() {
            this.editPasswordVisible = false;
            this.$refs.passwordFormRef.resetFields();
        },
    },
}
</script>
  
<style scoped lang="less">
.left {
    margin-right: 15px;
    display: inline-block;
    padding: 10px;
    cursor: pointer;
}

.menu {
    font-weight: 600;
}

.view-user-setting {
    font-size: 14px;
    width: 900px;
    margin: 0 auto;

    .head-box {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 24px;
        display: flex;
        align-items: center;

        .avatar-box {
            cursor: pointer;

            .img {
                height: 88px;
                width: 88px;
                line-height: 88px;
            }
        }

        .user-info {
            padding-left: 16px;

            h6 {
                margin-bottom: 4px;
                font-size: 20px;
            }

            .name {
                display: flex;
                align-items: center;
            }

            .vip {
                color: #4285f4;
                padding: 10px 20px;
                border-radius: 4px;
                outline: none;
            }
        }
    }

    .tabs-box {
        margin-top: 16px;

        /deep/ .el-tabs__nav-wrap::after {
            background: none;
        }
    }

    .flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .tabs-account {
        margin-top: 16px;
        background: #f8f9fa;
        border-radius: 0 8px 8px 0;
        padding: 0 24px 24px;

        h3 {
            font-size: 16px;
            align-items: center;
            padding: 24px 0;
            overflow: hidden;
            margin: 0;
        }

        .form-card {
            background: #fff;
            border: 1px solid #dadce0;
            border-radius: 4px;
            box-shadow: inset 4px 0 0 0 #4285f4;
            margin: 0;
            padding: 0;

            li {
                display: flex;
                align-items: center;
                padding: 16px 0;
                border-top: 1px solid #dadce0;
                margin-left: 4px;

                .label-title {
                    padding: 0 24px;
                    width: 100px;
                    text-align: left;
                }

                .info-txt {
                    flex: 1;
                    color: #5f6368;
                    padding-right: 24px;
                    text-align: left;
                    margin: 0;

                    .info {
                        color: #74787c;

                        i {
                            margin-right: 8px;
                            font-size: 16px;
                        }
                    }
                }

                .input-p {
                    min-width: 200px;
                    margin: 0;
                }
            }

            li:first-child {
                border: 0;
            }
        }
    }

    .but-box {
        font-size: 14px;
        cursor: pointer;
        color: #4285f4;
        font-weight: normal;
    }

    .font-color--warning {
        color: #ff941f;
    }

}
</style>